<template>
  <div class="wrapper">
    <dx-header-bar title="工单管理"></dx-header-bar>
    <div class="row">
      <div class="col" v-for="(item, index) in menu"
           :key="index" @click="$router.push(item.link)">
        <img class="icon" :src="item.icon">
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import iconOrderKt from './order_kt.png';
import iconOrderKc from './order_kc.png';
import iconOrderTs from './order_ts.png';
import iconOrderGz from './order_gz.png';

export default {
  components: {
    DxHeaderBar
  },
  data() {
    return {
      menu: [
        { name: '勘查工单', icon: iconOrderKc, link: '/building' },
        { name: '开通工单', icon: iconOrderKt, link: '/building' },
        { name: '投诉工单', icon: iconOrderTs, link: '/building' },
        { name: '故障工单', icon: iconOrderGz, link: '/building' }
      ]
    };
  }
};
</script>

<style lang="stylus" scoped>
  .row
    overflow : hidden

  .col
    float : left
    padding : 20px
    width : 25%
    text-align : center
    border-bottom : .5px solid #eee
    border-right : .5px solid #eee

  .icon
    display : block
    margin : 0 auto 10px
    height : 96px
    width : 96px

  .name
    font-size : 28px
</style>
